Claude Code + Vibe Coding 一行代码不写,给站点增加工作流模块

前段时间，我一直在研究一个叫 n8n 的自动化工具，工作流没有很好的归类和保存，有很多网友私信分享，但是确实比较乱没有整理，没法给到，于是想着干脆给站点增加了一个工作流模块。

这个模块使用 Claude Code + Vibe Coding 的方式完成，不主动写一行代码，耗时一个晚上完成。

本质上，做网站的方式还是不变的：将脑子中的想法，落地成机器可以识别的内容，然后以网站的方式呈现。 对比传统编程 Vibe coding 不同的是，以往做个网站都是需要拥有编码能力才能做到，现在借助AI，只要能够描述好需求即使不会代码也是能够完成。 (当然，目前的AI能力只能够完成简单的编码工作，复杂的还是会有问题，不过随着AI模型越来越强，AI的复杂业务编码能力会越来越强) vibe coding 做网站，整个流程主要是三步

• 第一步：需求拆解
• 第二步：借助AI落地需求
• 第三步：部署上线

第一步 需求拆解

需求可以是复杂的也可以是简单的。但是最终拆解完后需求一定是一个个简单的点。

我这里的需求就很简单，我拆解后就一个目标：做一个分享n8n工作流的模块，其他的统统不要。

第二步 借助AI落地需求

借助AI落地需求就是通过自然语言的方式，指挥AI干活，也是给 AI提供提示词。

我的提示词也很简单：

你是一个资深的前端工程师，你现在需要做一个 n8n 工作流分享模块，我会给你提供一系列的 .json 格式的n8n工作流文件，只需要一个展示工作流的功能，其他的统统不要，代码完成后我会部署在 vercel 上。

提示词打完之后，剩下的就是交给 AI 来处理。

在编码过程会遇到各种问题，例如网站无法打开，字体颜色问题等。直接将问题描述给AI进行修改。

第三步 部署上线

部署上线也很简单，同时 Vercel 提供的免费资源也完全够部署网站了，目前我在上面跑了3个网站，资源仍然充足，不需要付费。